<template>
  <div class="chart">
    <div class="card-search">
      <el-form
        size="small"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="时间">
          <el-date-picker
            v-model="formInline.timeLine"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:00"
            value-format="yyyy-MM-dd HH:mm:00"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button icon="el-icon-search" type="primary" @click="getAllDataNew"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="card-table">
      <el-table
        :header-cell-style="getRowClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column label="序号" width="width" type="index" align="center">
        </el-table-column>
        <el-table-column align="center" label="晾料结束" width="width">
          <template slot-scope="{ row }">
            {{ row.endTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="混捏结束" width="width">
          <template slot-scope="{ row }">
            {{ row.startTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="混捏结束温度" width="width">
          <template slot-scope="{ row }">
            {{
              Number(row.MaxMap.混捏结束温度.value).toFixed(1)
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="晾料开始温度" width="width">
          <template slot-scope="{ row }">
            {{
              Number(row.MaxMap.晾料中.value).toFixed(1)
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="晾料结束温度" width="width">
          <template slot-scope="{ row }">
            {{
              Number(row.MaxMap.晾料后.value).toFixed(1)
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="晾料时长" width="width">
          <template slot-scope="{ row }">
            {{
              `${
                (Number(Date.parse(row.endTime)) -
                  Number(Date.parse(row.startTime))) /
                1000 /
                60
              }分钟`
            }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagin" v-if="total >= pageSize">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :append-to-body="true"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="80%"
      style="margin-left: 150px"
    >
      <div id="main"></div>
    </el-dialog>
  </div>
</template>

<script>
import { getReportData } from "@/api/smallCalcination/index.js";
export default {
  data() {
    return {
      total: "",
      pageSize: 10,
      currPage: 1,
      dialogVisible: false,
      formInline: {
        timeLine: null,
      },
      tableData: [],
      myChart: "",
    };
  },
  created() {
    // this.getAllData();
    this.getAllDataNew()
  },
  updated() {},
  mounted() {
    
  },
  methods: {
    // async getAllData() {
    //   if (this.formInline.timeLine === null)
    //     this.formInline.timeLine = ["", ""];
    //   const params = {
    //     pageSize: this.pageSize,
    //     currPage: this.currPage,
    //     startTime: this.formInline.timeLine[0],
    //     endTime: this.formInline.timeLine[1],
    //     interval: 0,
    //   };
    //   console.log(params);
    //   let {
    //     data: { data },
    //   } = await getReportData(params);
    //   this.tableData = data.data;
    //   this.total = data.count;
    //   console.log(data.data);
    // },
    async getAllDataNew(){
      if (this.formInline.timeLine === null)
        this.formInline.timeLine = ["", ""];
      const params = {
        pageSize: this.pageSize,
        currPage: this.currPage,
        startTime: this.formInline.timeLine[0],
        endTime: this.formInline.timeLine[1],
        interval: 0,
      };
      let {
        data: { data },
      } = await getReportData(params);
      this.tableData = data.data;
      this.total = data.count;
    },
    // showEcharts(row) {
    //   console.log(row);
    //   this.dialogVisible = true;
    //   this.$nextTick(() => {
    //     this.myChart = this.$echarts.init(document.getElementById("main"));
    //     let option = {
    //       title: {
    //         text: `温度 (${row.startTime})`,
    //         left: "60px",
    //         size: "small",
    //       },
    //       tooltip: {
    //         trigger: "axis",
    //       },
    //       legend: {
    //         data: [
    //           "晾料锅",
    //           "晾料后",
    //           "西锅混捏",
    //           "东锅混捏",
    //           "混捏温度",
    //           "水池进水",
    //         ],
    //         selected: {
    //           晾料锅: true,
    //           晾料后: true,
    //           西锅混捏: false,
    //           东锅混捏: false,
    //           混捏温度: true,
    //           水池进水: false,
    //         },
    //       },
    //       toolbox: {
    //         show: true,
    //         right: "120px",
    //         feature: {
    //           dataZoom: {
    //             yAxisIndex: "none",
    //           },
    //           dataView: { readOnly: false },
    //           magicType: { type: ["line", "bar"] },
    //           restore: {},
    //           saveAsImage: {},
    //         },
    //       },
    //       xAxis: {
    //         type: "category",
    //         boundaryGap: false,
    //         data: row.data[0].info.t1.time,
    //       },
    //       yAxis: {
    //         type: "value",
    //         axisLabel: {
    //           formatter: "{value} °C",
    //         },
    //       },
    //       series: [
    //         {
    //           name: "晾料锅",
    //           type: "line",
    //           data: row.data[0].info.t1.data,
    //           markPoint: {
    //             data: [{ type: "max", name: "Max" }],
    //           },
    //         },
    //         {
    //           name: "晾料后",
    //           type: "line",
    //           data: row.data[0].info.t2.data,
    //           markPoint: {
    //             data: [{ type: "max", name: "Max" }],
    //           },
    //         },
    //         {
    //           name: "西锅混捏",
    //           type: "line",
    //           data: row.data[0].info.t3.data,
    //           markPoint: {
    //             data: [{ type: "max", name: "Max" }],
    //           },
    //         },
    //         {
    //           name: "东锅混捏",
    //           type: "line",
    //           data: row.data[0].info.t4.data,
    //           markPoint: {
    //             data: [{ type: "max", name: "Max" }],
    //           },
    //         },

    //         {
    //           name: "混捏温度",
    //           type: "line",
    //           data: row.data[0].info.t5.data,
    //           markPoint: {
    //             data: [{ type: "max", name: "Max" }],
    //           },
    //         },
    //         {
    //           name: "水池进水",
    //           type: "line",
    //           data: row.data[0].info.t6.data,
    //           markPoint: {
    //             data: [{ type: "max", name: "Max" }],
    //           },
    //         },
    //       ],
    //     };
    //     this.myChart.setOption(option);
    //   });
    // },
    // disposeEcharts() {
    //   this.dialogVisible = false;
    //   this.myChart.dispose();
    // },
    handleClose() {
      this.disposeEcharts();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllDataNew();
    },
    handleCurrentChange(val) {
      this.currPage = val;
      this.getAllDataNew();
    },
  },
};
</script>

